<template>
	<div class="content_box" v-if="fullShow">
		<FullCalendar :options="calendarOptions" ref="FullCalendar" />
	</div>
</template>

<script>
	import {
		defineComponent,
		getCurrentInstance,
		onBeforeMount
	} from "vue";
	import "@fullcalendar/core/vdom";
	import FullCalendar from "@fullcalendar/vue3";
	import zhcn from "@fullcalendar/core/locales/zh-cn"; //中文
	import dayGridPlugin from "@fullcalendar/daygrid";
	import interactionPlugin from "@fullcalendar/interaction";
	import timeGridPlugin from "@fullcalendar/timegrid";

	export default defineComponent({
		components: {
			FullCalendar,
		},
		props: {
		  events: {
		    type: Array,
		    default: [],
		  },
		},
		setup() {
			const {
				proxy,
			} = getCurrentInstance();
			return {
				fullShow:false,
				calendarOptions: {
					plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
					initialView: "dayGridMonth",
					locale: zhcn, //中文包
					DISABLED_COLOR: '#c5c8ce',
					USED_COLOR: '#19be6b',
					NORMAL_COLOR: '#2db7f5',
					customButtons: {
						myCustomButton: {
							text: "custom",
							click: function() {
								alert("clicked the custom button!");
							},
						},
					},
					headerToolbar: {
						left: "title",
						center: "",
						right: "prevYear,prev,next,nextYear today",
					},
					events:[] , //事件事件+文本
					eventColor: "#276de9", //事件背景颜色
					eventClick: (info) => {
						proxy.$emit('edit',info['event'])
					},
					dateClick: (info) => {
						proxy.$emit('add')
					},
					gotoDate: (date) => {
						proxy.$nextTick(()=>{
							let labelApi = proxy.$refs.FullCalendar.getApi()
							labelApi.gotoDate(date)
						})
						
					},
					editable: true,
					dayMaxEventRows: 2,
				},
				/**
				 * 切换modal显示状态
				 * @param {String} type 'modify' || 'increase'
			  * @param {Boolean} isShow
				 * @param {Object} value
				 */
				ChangetoggleModal(type, isShow, value) {
					proxy.$refs[`${type}Model`].updateModal(isShow, value)
				}
			};
		},
	});
</script>

<style lang="less" scoped>
	.content_box {
		color: #2a2a2a;
	}
</style>
